<!--  -->
<template>
  <div class="Invoicer-bound-to-enterprise-con">
    <div class="declare-data-item">
      <a-form-model :layout="'inline'" :model="form" v-bind="formItemLayout">
        <a-form-model-item label="渠道名称">
          <a-input v-model="form.name" placeholder="请输入渠道名称" style="width: 100%;" />
        </a-form-model-item>
        <a-form-model-item label="企业名称">
          <a-input v-model="form.entName" placeholder="请输入企业名称" style="width: 100%;" />
        </a-form-model-item>
        <a-form-model-item label="开票员">
          <a-input v-model="form.userName" placeholder="请输入开票员" style="width: 100%;"/>
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{span: 24 }">
          <a-button type="primary" @click="queryEvent">  查询 </a-button>
          <a-button @click="ResetEvent" style="margin-left: 10px;">  重置 </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="declare-data-item">
      <a-table :columns="NotReported.columnsAll" :data-source="NotReported.tableData" bordered  :scroll="{  y: 300 }">
        <span slot="action" slot-scope="text, record">
          <a-button :disabled="record.checked" type="link" @click="addUser(record)"> {{record.checked == false ? '添加':'已添加'}} </a-button>
        </span>
      </a-table>
    </div>
    <a-divider orientation="left">已选企业</a-divider>
    <div class="declare-data-item">
      <a-table :columns="NotReported.columns" :data-source="NotReported.tableData1" bordered  :scroll="{  y: 300 }" >
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="removeUser(record)"> 移除 </a-button>
        </span>
      </a-table>
    </div>
    <div class="declare-data-item btn-group">
      <a-button type="primary" @click="okEvent">下一步</a-button>
      <!-- <a-button @click="closeEvent_">取消</a-button> -->
    </div>
  </div>
</template>

<script>
import tableConfig from './utils/tableConfig'
import getDataDB from '@/api/InvoiceIssuer.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'InvoicerBoundEnterprise',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      formItemLayout: { labelCol: { span: 8 }, wrapperCol: { span: 16 } },
      form:{
        userName:'',
        entName:'',
        name:''
      },

      NotReported: {
        tableData: [],
        tableData1:[],
        columns: tableConfig('InvoicerBoundEnterprise-1'),
        columnsAll: tableConfig('InvoicerBoundEnterprise-2'),
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
       if (!this.isType.isNullOrUnDef(val) && !this.isType.isEmpty(val)) {
        console.log("******************",val);
        this.NotReported.tableData1 = []
        this.getQYDataList4DB()
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getQYDataList4DB(){
      const {cardNum, phone, dw, table} = this.data
      const param = {
        "idCard": cardNum,
        "phone": phone,
        "type": dw,
        channelName: this.form.name,
        entName: this.form.entName,
        name:this.form.userName,
      }
      getDataDB('开票员关联企业-企业列表查询',param).then(res => {
        if(res.success==true){
          this.NotReported.tableData =  res.result.map(item=>{
            const res = {...item, checked:false, key:item.entId}
            if (table.indexOf(item.entId) >= 0) {
              res.checked = true
              res['edit'] = true
            }
            return res
          })
        }else {
          this.$message.warning(res.message)
        }
      })
    },
    okEvent(){
      if(this.NotReported.tableData1.length == 0){
        this.$message.warning("请在第一个表格中选择至少一条数据，后再进行下一步")
        return false
      }
      this.closeEvent_()
    },
    closeEvent_(){
      this.closeEvent(false,{type:'addUser', data: this.NotReported.tableData1})
    },
    queryEvent() {
      console.log('==========>',this.form);
      this.getQYDataList4DB()
    },
    ResetEvent() {
      this.form = { userName:'', entName:'', name:'' }
      this.getQYDataList4DB()
    },
    setTableData(checked, rowData){
      const {key} = rowData
      const tempArr = []
      this.NotReported.tableData.forEach(item=>{
        if(item.key === key){
          item.checked = checked
        }
        if(item.checked == true){
          if (item.edit && item.edit == true) {

          } else {
            tempArr.push(item)
          }
        }
      })
      this.NotReported.tableData1 = tempArr
    },
    addUser(rowData) {
      this.setTableData(true,rowData)
    },
    removeUser(rowData){
      this.setTableData(false,rowData)
    }
  },
  }
</script>
<style lang='less'>
.Invoicer-bound-to-enterprise-con{
  width: 100%;
  // height: 380px;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction: column;
  padding: 10px 0;

  .declare-data-item{
    width: 100%;
    padding: 5px 0;
    &.tip-con{
      padding: 5px 50px;
    }
    &.btn-group{
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 5px 300px;
    }
  }
}
</style>
